<template>
    <div class="details">
        <div class="wrapper">
            <h2 class="name">{{ data.name }}</h2>
            <div>
                <el-button type="primary" style="position: relative;left: 75%" @click="handleAdd3()">加入购物车</el-button>
                <el-button type="primary" style="position: relative;left: 75%" @click="handleAdd()">我要看房</el-button>
                <el-button type="primary" style="position: relative;left: 75%;margin-bottom: 20px" @click="handleAdd2()">我要订房</el-button>
            </div>
            <img class="img" :src="data.pic"/>
            <div >
                <h2 class="oth">房源简介</h2>
                <span class="con">{{data.instruction}}</span>
            </div>
            <div >
                <h2 class="oth">房源价格</h2>
                <span class="con">{{data.price}}</span>
            </div>
            <div >
                <h2 class="oth">房源地址</h2>
                <span class="con">{{data.address}}</span>
            </div>
        </div>

        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form"  label-width="80px">
                <el-form-item label="看房时间" required>
                    <el-date-picker
                            v-model="lookTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title2" :visible.sync="open2" width="500px" append-to-body>
            <el-form ref="form" :model="form"  label-width="80px">
                <el-form-item label="月数" required>
                    <el-input-number v-model="mouthNum"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm2">确 定</el-button>
                <el-button @click="cancel2">取 消</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import { getHouseDetail,getToken,addRecord,addOrder,addShopping } from "@/utils/request";
    export default {
        name: "HouseDetail",
        data() {
            return {
                id: "",
                data: {},
                lookTime:"",
                open: false,
                title2:'',
                title:'',
                form: {
                },
                mouthNum:0,
                open2:false
            };
        },
        methods: {
            handleAdd() {
                this.open = true;
                this.title = "预约看房";
            },
            handleAdd2() {
                this.open2 = true;
                this.title2 = "我要订房";
            },
            handleAdd3() {
                const par={
                    houseId:this.id
                }
                addShopping(par).then(response => {
                    this.$message({
                        type: "success",
                        message: "加入成功",
                    });
                    this.open = false;
                    this.findDetails();
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        let a = undefined;
                        let data={
                            lookTime: this.lookTime,
                            housuId:this.id
                        }
                        if (a !== getToken()) {
                            addRecord(data).then(response => {
                                this.$message({
                                    type: "success",
                                    message: "预定成功",
                                });
                                this.open = false;
                                this.findDetails();
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: "请先登录",
                            });
                        }

                    }
                });
            },
            submitForm2() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        let a = undefined;
                        let data={
                            mouthNum: this.mouthNum,
                            houseId:this.id
                        }
                        if (a !== getToken()) {
                            addOrder(data).then(response => {
                                this.$message({
                                    type: "success",
                                    message: "预定成功",
                                });
                                this.open2 = false;
                                this.findDetails();
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: "请先登录",
                            });
                        }

                    }
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
            },cancel2() {
                this.open2 = false;
            },
            // 查询项目的详细信息
            findDetails() {
                // 数据交互
                getHouseDetail(this.id).then((res) => {
                    if (res.code == 200) {
                        this.data = res.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                        });
                    }
                });
            },
        },
        created() {
            // 在页面加载的时候拿到数据
            // 拿到从上一个页面传过来的id值
            this.id = this.$route.query.id;
            this.findDetails();
        },
    };
</script>

<style scoped lang='scss'>
    .details {
        .wrapper{

            .name {
                text-align: center;
                font-size: 30px;
                color: #0189ec;
            }
            .img{
                width: 1300px;
                height: 500px;
            }
            .oth {
                /*text-align: center;*/
                font-size: 30px;
            }
            .con {
                font-size: 18px;
            }
        }
    }
</style>
